<template>
	<view>
		<u-navbar :is-back="false" :background="background">
			<view class="slot-wrap">
				<view class="slot-left">
					<text class="slot-left-text" v-if="initData">{{initData.app_name}}</text>
					<text class="slot-left-text" v-else>{{appName}}</text>
					<!-- <u-icon name="arrow-down-fill" color="#ffffff" size="25"></u-icon> -->
				</view>
				<!-- <view class="search-wrap">
					<u-search v-model="keyword" :disabled="true" :show-action="false" :action-style="{color: '#fff'}">
					</u-search>
				</view> -->
			</view>
		</u-navbar>
		<view class="ym-search">
			<u-search placeholder="搜索一下" @click="$u.route('/pages/search/search')" disabled v-model="keyword"
				:show-action="false"></u-search>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="banner" v-if="initData">
			<u-swiper :list="initData.home_banner" name="pic" height="300"></u-swiper>
		</view>
		<view class="gird" v-if="initData">
			<u-grid :col="5" :border="false">
				<u-grid-item style="background: rgba(0,0,0,0);" @click="$u.route(item.url)"
					v-for="(item,index) in initData.home_menu" :key="index">
					<u-image width="80rpx" height="80rpx" :src="item.pic"></u-image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="ad" v-if="initData">
			<u-image :border-radius="10" width="100%" height="200rpx" :src="initData.home_ad.pic">
			</u-image>
		</view>
		<u-sticky :offset-top="offsetTop">
			<view style="background-color: #F8F8F8;">
				<!-- 标题栏 -->
				<HeadCell :leftShow="false" :tabs="opentop?tabs:tabs1" :rightShow="false" @tabChange="tabChange">
				</HeadCell>
			</view>
		</u-sticky>
		<block v-if="opentop">
			<block v-if="tabCurrent==0">
				<view class="info-margin">
					<!-- 招聘信息列表 -->
					<JobList :JobData="JobData"></JobList>
					<view style="background-color: white;" v-if="JobData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==1">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseRentData"></HouseList>
					<view style="background-color: white;" v-if="houseRentData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==2">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseSellData"></HouseList>
					<view style="background-color: white;" v-if="houseSellData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==3">
				<view class="info-margin">
					<!-- 车信息列表 -->
					<CarList :carData="carData"></CarList>
					<view style="background-color: white;" v-if="carData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
		</block>
		<block v-else>
			<block v-if="tabCurrent==0">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseRentData"></HouseList>
					<view style="background-color: white;" v-if="houseRentData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==1">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseSellData"></HouseList>
					<view style="background-color: white;" v-if="houseSellData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==2">
				<view class="info-margin">
					<!-- 车信息列表 -->
					<CarList :carData="carData"></CarList>
					<view style="background-color: white;" v-if="carData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
		</block>
		<!-- #ifdef H5 -->
		<view style="height: 44px"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		APP_NAME
	} from '../../env.js'
	import HeadCell from '@/components/HeadCell/HeadCell.vue';
	import JobList from '@/components/JobList/JobList.vue';
	import HouseList from '@/components/HouseList/HouseList.vue';
	import CarList from '@/components/CarList/CarList.vue'
	export default {
		components: {
			HeadCell,
			JobList,
			HouseList,
			CarList
		},
		data() {
			return {
				appName: APP_NAME,
				background: {
					backgroundColor: '#f44c01',
				},
				keyword: '',
				offsetTop: 0,
				JobData: [],
				houseRentData: [],
				houseSellData: [],
				tabs: [{
					name: '好工作'
				}, {
					name: '好房出租'
				}, {
					name: '好房出售'
				}, {
					name: '品质好车'
				}],
				tabs1: [{
					name: '好房出租'
				}, {
					name: '好房出售'
				}, {
					name: '品质好车'
				}],
				carData: [],
				tabCurrent: 0,
				initData: null,
				opentop: false,
			}
		},
		onLoad() {
			var that = this;
			//#ifndef H5
			uni.getSystemInfo({
				success: function(res) {
					let windowWidth = res.windowWidth;
					let statusBarHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					that.offsetTop = (44 + statusBarHeight) * 750 / windowWidth;
				}
			});
			//#endif
			this.$u.get('/home/init', {

			}).then(res => {
			console.log(res)
				this.initData = res;
				uni.setStorageSync('initData', res);
			})
			this.getVerify()
		},
		onShareAppMessage() {
			return {
				title: APP_NAME,
				path: '/pages/index/index'
			}
		},
		methods: {
			getVerify() {
				this.$u.get('/tc/verifyToken', {}).then(res => {
					this.opentop = res.opentop;
					if (this.opentop) {
						this.getJobList()
					} else {
						this.getHouseRentList();
					}
				})
			},
			tabChange(index) {
				if (this.opentop) {
					this.tabCurrent = index;
					switch (index) {
						case 0:
							this.getJobList();
							break;
						case 1:
							this.getHouseRentList();
							break;
						case 2:
							this.getHouseSellList();
							break;
						case 3:
							this.getCarList();
							break;
					}
				} else {
					this.tabCurrent = index;
					switch (index) {
						case 0:
							this.getHouseRentList();
							break;
						case 1:
							this.getHouseSellList();
							break;
						case 2:
							this.getCarList();
							break;
					}
				}
			},
			getJobList() {
				this.$u.get('/home/job/list', {

				}).then(res => {
					this.JobData = res;
				})
			},
			getHouseRentList() {
				this.$u.get('/home/room/list', {
					userType: '出租',
				}).then(res => {
					this.houseRentData = res;
				})
			},
			getHouseSellList() {
				this.$u.get('/home/room/list', {
					userType: '出售',
				}).then(res => {
					this.houseSellData = res;
				})
			},
			getCarList() {
				this.$u.get('/home/car/list', {}).then(res => {
					this.carData = res;
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.ym-search {
		padding: 20rpx;
		background-color: white;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.slot-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750rpx;
		//加入搜索框时去掉
		justify-content: center;
	}

	.slot-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 20rpx;
		/* #ifdef MP */
		margin-bottom: 10rpx;

		/*  #endif  */
		.slot-left-text {
			font-size: 35rpx;
			color: white;
			margin-right: 10rpx;
		}
	}

	.search-wrap {
		margin: 0 20rpx;
		/*  #ifndef MP */
		flex: 1;
		/*  #endif  */
		/* #ifdef MP */
		width: 380rpx;
		margin-bottom: 10rpx;
		/*  #endif  */
	}

	.banner {
		margin: 20rpx;
	}

	.gird {
		margin: 0 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.ad {
		margin: 20rpx;
	}

	.info-margin {
		margin: 0 20rpx 20rpx 20rpx;
	}
</style>
<style>
	.u-grid-item {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
